<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:bookstore="/WEB-INF/bookstore.tld">

<head>
<ui:insert name="header">
	<ui:include src="template/header.xhtml" />
</ui:insert>
</head>

<body>
	<f:view>
		<ui:include src="template/banner.xhtml" />
		<h:form id="checkout">

			<p>
				<h:outputText value="#{bundle.Amount}" />
				<strong> <h:outputText value="#{cart.total}">
						<f:convertNumber type="currency" />
					</h:outputText>
				</strong>
			</p>

			<p>
				<h:outputText value="#{bundle.Purchase}" />
			</p>

			<h:panelGrid columns="3" headerClass="list-header"
				rowClasses="list-row-even, list-row-odd"
				styleClass="list-background" summary="#{bundle.CustomerInfo}"
				title="#{bundle.Checkout}">

				<f:facet name="header">
					<h:outputText value="#{bundle.Checkout}" />
				</f:facet>

				<h:outputText value="#{bundle.Name}" />

				<h:inputText id="name" size="50" value="#{cashier.name}"
					required="true" requiredMessage="#{customMessages.CustomerName}">
					<f:valueChangeListener
						type="com.example.bookstore.listeners.NameChangedListener" />
				</h:inputText>

				<h:message styleClass="error-message" for="name" />


				<h:outputText value="#{bundle.CCNumber}" />

				<h:inputText id="ccno" size="19"
					converterMessage="#{customMessages.CreditMessage}" required="true"
					requiredMessage="#{customMessages.ReqMessage}">
					<f:converter binding="#{cashier.creditCard}" />
					<bookstore:formatValidator
						formatPatterns="9999999999999999|9999 9999 9999 9999|9999-9999-9999-9999" />
				</h:inputText>

				<h:message styleClass="error-message" for="ccno" />

				<h:outputText value="#{bundle.Shipping}" />

				<h:selectOneMenu id="shippingOption" required="true"
					value="#{cashier.shippingOption}">
					<f:selectItem itemValue="2" itemLabel="#{bundle.QuickShip}" />
					<f:selectItem itemValue="5" itemLabel="#{bundle.NormalShip}" />
					<f:selectItem itemValue="7" itemLabel="#{bundle.SaverShip}" />
				</h:selectOneMenu>

				<h:message styleClass="error-message" for="shippingOption" />


				<h:outputText value="#{bundle.Newsletters}" />

				<h:selectManyCheckbox id="newsletters" layout="pageDirection"
					value="#{cashier.newsletters}">
					<f:selectItems value="#{newsletters}" />
				</h:selectManyCheckbox>

				<h:message styleClass="error-message" for="newsletters" />
				<h:message styleClass="error-message" for="fanClub" />
			</h:panelGrid>
			<h:panelGrid columns="2"
				columnClasses="special-offer, list-column-left"
				summary="#{bundle.DukeFanClub}">
				<h:selectBooleanCheckbox id="fanClub" rendered="false"
					binding="#{cashier.specialOffer}" />
				<h:outputLabel for="fanClub" rendered="false"
					binding="#{cashier.specialOfferText}">
					<h:outputText id="fanClubLabel" value="#{bundle.DukeFanClub}" />
				</h:outputLabel>
			</h:panelGrid>
			<h:panelGrid columns="1" columnClasses="padding: 10px;"
				summary="#{bundle.ThanksMsg}">
				<h:outputText id="thanksMsg" rendered="false"
					binding="#{cashier.thankYou}"
					style="font-family: sans-serif; font-size: 12pt; padding: 10px; width: 100%; text-align: right;"
					value="#{bundle.ThanksMsg}" />

				<h:commandButton value="#{bundle.Submit}" action="#{cashier.submit}">
					<f:setPropertyActionListener target="#{cashier.stringProperty}"
						value="" />
				</h:commandButton>
			</h:panelGrid>

		</h:form>
	</f:view>
</body>
</html>